Error Boundaries

In this example, we looked at a financial news website with a stock ticker:

We have a Ticker component that fetches fake data from our test API, using the SWR library:

import React from 'react';
import useSWR from 'swr';

const ENDPOINT =
  'https://jor-test-api.vercel.app/api/get-stock-quotes';

async function fetcher(endpoint) {
  const response = await fetch(endpoint);
  const json = await response.json();

  return json.data;
}

function Ticker() {
  const { data, isLoading } = useSWR(
    ENDPOINT,
    fetcher
  );

  if (isLoading) {
    return null;
  }

  return (
    <section className="ticker">
      <dl>
        {data.map(
          ({ id, title, value, change }) => (
            <React.Fragment key={id}>
              {/* ✂️ UI stuff */}
            </React.Fragment>
          )
        )}
      </dl>
    </section>
  );
}

This code works fine in the “happy path”, but what if things go wrong? What if the server can't provide the data we're requesting?

We can test this with the simulatedError query param:

const ENDPOINT =
  'https://jor-test-api.vercel.app/api/get-stock-quotes?simulatedError=true';

When we do this, we get an error message:

The problem is that we don't have any data, because the server returned an error. Our component hasn't implemented any error-handling.

We can and should add error-handling, but honestly, it's hard to anticipate all possible errors. Almost by definition, errors are rare events, edge cases that are hard to predict.

This component, the <Ticker> that shows the stock prices, is a relatively unimportant part of this page. Most people who visit this page are probably here for the top stories, or to cancel a subscription, or any number of other things.

And so it seems like a shame that an issue in an unimportant component is breaking the entire experience. What if we could "quarantine" the issues here, so that this error only affects the <Ticker> component?

This is what Error Boundaries allow us to do.

I created a custom ErrorBoundary component. We'll dig into it shortly, but first, here's how we implement it:

import React from 'react';

import Header from './Header';
import Ticker from './Ticker';
import Stories from './Stories';
import ErrorBoundary from './ErrorBoundary';

function App() {
  return (
    <>
      <Header />
      <ErrorBoundary
        fallback={
          <div className="error">
            Stock ticker couldn't load
          </div>
        }
      >
        <Ticker />
      </ErrorBoundary>
      <main>
        <h1>Top Stories</h1>
        <Stories />
      </main>
    </>
  );
}

We're wrapping the <Ticker> element inside our ErrorBoundary. As a result, we'll show a custom fallback message if the Ticker component explodes:

Unfortunately, error boundaries are one of the few features that has not been migrated to hooks. We still need to use class components for our error boundaries.

The good news is that I generally only create a single ErrorBoundary component per codebase, and reuse this component whenever I need a new error boundary. And so we won't need to actually work with class components at all, once we've set this up.

Here's the code:

import React from 'react';

class ErrorBoundary extends React.Component {
  // Equivalent to:
  // const [hasError, setHasError] = useState(false);
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError() {
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    console.error(error);
    console.info({ errorInfo });
  }

  render() {
    if (this.state.hasError) {
      return this.props.fallback || null;
    }

    return this.props.children;
  }
}

export default ErrorBoundary;

We won't dig into this too much, since it isn't relevant to understand that much about class components. But here's the quick summary:

• constructor is used to initialize state variables.
• render is where all of the render stuff goes. This method is equivalent to everything inside our functional component except the hooks.
• componentDidCatch allows us to log when errors happen
• getDerivedStateFromError implements the error boundary.

When an error happens within any descendant component, the getDerivedStateFromError method intercepts it. Instead of blowing up the whole page, it flips our state variable, hasError, from false to true.

In the render method, we render the children prop by default (the <Ticker> element), but if hasError is true, we render the fallback content instead, if provided.

This handy component can be used to "wall off" different sections of our application, guaranteeing that problems in one section don't affect the other. As a result, small problems in our code don't cause big problems for our users!